<template>
<div>
  <div class="background">
    <img src="../login/login.jpg" width="100%" height="100%" alt="" />
  </div>
  <div class="front">
    <div style="margin-left: 90%;">
      <el-dropdown @command="changeRole">
        <el-button plain type="primary" style="margin-top: 2%;color: black">
          切换用户<i class="el-icon-arrow-down el-icon--right"></i>
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="admin">管理员</el-dropdown-item>
          <el-dropdown-item command="tenant" @click.native="loginte()">租客</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <body id="poster">
    <el-form :model="form" :rules="rules" ref="form" class="login-container" label-position="left" label-width="0px">
      <h3 class="login_title">房主登录</h3>
      <el-form-item prop="hphone">
        <el-input type="text" v-model="form.hphone" auto-complete="off" placeholder="账号"></el-input>
      </el-form-item>

      <el-form-item prop="password">
        <el-input type="password" v-model="form.password" auto-complete="off" placeholder="密码"></el-input>
      </el-form-item>

      <el-form-item style="width: 100%">
        <el-button type="primary" style="width: 100%;background: #505458;border: none" @click="submitForm('form')">登录</el-button>
      </el-form-item>
    </el-form>
    </body>
  </div>
</div>
</template>


<script>
import loginHouseOwner from '@/api/houseowner/loginHouseOwner'
  export default {
    name: "LoginHouseOwner",
    data() {
        var checkHphone = (rule,value,callback) => {
            if(!value){
                callback(new Error('id不能为空'));
            } else if (isNaN(value)) {
                callback(new Error('用户ID必须是数字!'));
            } else if (!Number.isInteger(parseFloat(value))) {
                callback(new Error('用户id不能有特殊字符！'))
            } else if (value.toString().length != 11) {
                callback(new Error('请输入11位数字！'))
            } else return callback();
        };
        var checkPwd = (rule,value,callback) => {
            if (!value) {
                return callback(new Error('密码不能为空！'));
            } else return callback();
        }
        return {
            form: {
                hphone: '',
                password: ''
            },
            rules: {
                hphone: [{validator: checkHphone, trigger:'blur'}],
                password: [{validator: checkPwd, trigger:'blur'}]
            }
        };
    },
    methods: {
      loginte(){
        this.$router.replace({ path: "/tenantLogin" });
      },
        changeRole(command){
            if (command === "admin"){
                this.$router.push('/login')
            } else if (command === "tenant"){
                this.$router.push('/')
            }

        },
        submitForm(form) {
            this.$refs[form].validate(valid => {
                if (valid) {
                    loginHouseOwner.loginHouseOwner(this.form.hphone,this.form.password)
                    .then(response => {
                        var msg = response.status;
                        if (msg === 200) {
                            this.$message({
                                message: '登录成功',
                                center: true,
                                type: 'success'
                            })
                            localStorage.setItem('owner_id',this.form.hphone)
                            localStorage.setItem('owner_name',response.data.housename)
                            localStorage.setItem('owner_password',this.form.password)
                            localStorage.setItem('owner_address',response.data.address)
                            localStorage.setItem('owner_freetime',response.data.freetime)

                            console.log('owner_name')

                            this.$router.push('/homeHouseOwner')
                        }
                    })
                } else {
                    this.$message({
                        message: '请输入账号和密码',
                        center: true,
                        type: 'error'
                    });
                }
            })

        }
    }
  }
</script>

<style>
  #poster {
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0px;
    padding: 0;
  }

  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid blue;
    box-shadow: 0 0 25px black;
  }

  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .background{
    width:100%;
    height:100%;  /**宽高100%是为了图片铺满屏幕 */
    z-index:-0.5;
    position: absolute;
  }

  .front{
    z-index:0.1;
  }

</style>
